<template>
  <div class="main">
    <div class="header">
      <el-link type="danger" :underline="false" class="logout">退出登录</el-link>
      <img src="@/assets/avatar.png" alt="">
      <h2>944472692@qq.com</h2>
      <div>Lite会员</div>
      <div>2022-01-16 23:19:10</div>
    </div>
    <div class="detail">
      <div class="detail-item">
        <img src="@/assets/iconlogo.png" class="icon">
        <h3>http(s)端口</h3>
        <div>4780</div>
      </div>
      <div class="detail-item">
        <img src="@/assets/iconlogo.png" class="icon">
        <h3>socks端口</h3>
        <div>4781</div>
      </div>
      <div class="detail-item">
        <img src="@/assets/iconlogo.png" class="icon">
        <h3>账户余额</h3>
        <div>￥ 0.00</div>
      </div>
      <div class="detail-item">
        <img src="@/assets/iconlogo.png" class="icon">
        <h3>开机自启</h3>
        <div> <a-switch checked-children="开" un-checked-children="关" /></div>
      </div>
      <div class="detail-item">
        <img src="@/assets/iconlogo.png" class="icon">
        <h3>Log查看</h3>
        <div><el-link type="primary" :underline="false">点击查看</el-link></div>
      </div>
      <div class="detail-item">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Personal'
}
</script>

<style scoped>
.main{
  background-color: #fff;
  width: 100%;
  height: 100%;
}

.header{
  padding-top: 40px;
  position: relative;
  height: 270px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
}

.header div {
  color: #8c8cb1;
  font-size: 16px;
}

img{
  width: 85px;
  height: 85px;
  margin: auto;
  margin-bottom: 10px;
}

.detail{
  display: flex;
  flex-wrap: wrap;
}

.detail-item {
  width: 221px;
  height: 105px;
  border-bottom: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
  flex-grow: 1;
}

.detail-item .icon {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  position: relative;
  left: 32px;
  top: 20px;
}

.detail-item h3 {
  text-align: center;
  position: relative;
  top: -20px;
}

.detail-item div {
  text-align: center;
  position: relative;
  top: -10px;
}

.detail-item:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.logout{
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>
